<template>

    <div id="dep-manage" class="w-h-100 pos-r flex-1 apply-container page-public-s" style="box-sizing: border-box;overflow:hidden;">
        <div class="w-h-100 ver-flex pos-a" style="box-sizing: border-box; padding: 6px;">
            <div class="search-s" style="box-sizing: border-box;">
                <el-card shadow="never" :body-style="{ paddingBottom: '0' }">
                    <el-form class="box-f" ref="queryForm" :inline="true">
                        <el-form-item label="选择搜索方式：">
                            <el-select 
                                v-model="searchVal" 
                                filterable 
                                class="m-2" 
                                placeholder="请选择搜索方式" 
                                @change="searchChange"
                                popper-class="set-select"
                                :popper-append-to-body="false"
                            >
                                <el-option
                                    v-for="item in searchOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <!-- 人员名称 -->
                            <template v-if="searchVal === '1'">
                                <el-input v-model="transferVal" placeholder="请输入人员姓名" />
                            </template>
                            <!-- 部门名称 -->
                            <template v-else-if="searchVal === '2'">
                                <el-input v-model="transferVal" placeholder="请输入部门名称" />
                            </template>
                            <!-- 部门/班组 -->
                            <template v-else>
                                <el-select 
                                    v-model="transferVal" 
                                    filterable 
                                    class="m-2" 
                                    placeholder="部门/班组" 
                                    @change="acquireChange"
                                    value-key="id"
                                    popper-class="set-select"
                                    :popper-append-to-body="false"
                                >
                                    <el-option
                                        v-for="item in recordPle"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    />
                                </el-select>
                            </template>
                        </el-form-item>
                        <el-form-item >
                            <el-button @click='searchClick' icon="ele-Search" type="primary"> 查询 </el-button>
                            <el-button @click="resetClick" icon="ele-Refresh"> 重置 </el-button>
                            <el-button @click="nodeClick('')" icon="ele-Plus" type="primary"> 新增 </el-button>
                            <el-button icon="ele-Download" @click="downClick">下载模板</el-button>
                            <el-upload
                                class="upload-demo"
                                action="#"
                                :auto-upload='false'
                                ref="aModel"
                                :show-file-list="false"
                                :on-change="( file:any ) => { ExcelChange( file , getData ) }"
                                :on-success="onSuccess"
                                :limit="1"
                            >
                                <el-button icon="ele-Upload">导入Excel</el-button>
                            </el-upload>
                        </el-form-item>
                    </el-form>
                </el-card>
            </div>

            <div style="box-sizing: border-box;" class="flex-1 pos-r">
                <div class="pos-a w-h-100" style="box-sizing: border-box;">
                    <el-card class="box-card w-h-100" shadow="never" style="margin-top: 16px;">
                        <div style="" class="w-h-100 ver-flex">
                            <div class="flex-1 pos-r">
                                <div class="pos-a w-h-100">

                                    <el-table :data="list" class="w-h-100" style="width: 100%" border v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.5)">
                                        <el-table-column type="index" label="序号" width="55" align="center" :index="indexMethod" />
                                        <el-table-column min-width="140" :show-overflow-tooltip="true" prop="orgName" label="部门名称" align="center" />
                                        <el-table-column min-width="100" :show-overflow-tooltip="true" prop="empName" label="员工姓名" align="center" />
                                        <el-table-column min-width="100" :show-overflow-tooltip="true" label="性别" align="center">
                                            <template #default="scope">
                                                <span v-if="scope.row.gender === '1'">男</span>
                                                <span v-else>女</span>
                                            </template>
                                        </el-table-column>
                                        <!-- <el-table-column min-width="180" :show-overflow-tooltip="true" prop="cardId" label="身份证号" align="center" />
                                        <el-table-column min-width="100" :show-overflow-tooltip="true" label="身份证件" align="center">
                                            <template #default="scope">
                                                <el-link v-if="scope.row.cardId_Path && scope.row.cardId_Path.length !== 0" target="_blank" class="path_look" :href="pathData + scope.row.cardId_Path[0].path">查看</el-link>
                                                <div v-else style="color:#c0c4cc;" class="path_look">
                                                    <span>暂未上传</span>
                                                </div>
                                            </template>
                                        </el-table-column> -->
                                        <el-table-column min-width="100" :show-overflow-tooltip="true" label="员工照片" align="center">
                                            <template #default="scope">
                                                <el-link v-if="scope.row.empImage_Path" target="_blank" class="path_look" :href="pathData + scope.row.empImage_Path">查看</el-link>
                                                <div v-else style="color:#c0c4cc;" class="path_look">
                                                    <span>暂未上传</span>
                                                </div>
                                            </template>
                                        </el-table-column>
                                        <el-table-column min-width="160" :show-overflow-tooltip="true" prop="email" label="Email" align="center">
                                            <template #default="scope">
                                                <span v-if="scope.row.email">{{scope.row.email}}</span>
                                                <span v-else>-</span>
                                            </template>
                                        </el-table-column>
                                        <el-table-column min-width="160" :show-overflow-tooltip="true" prop="familyAddress" label="家庭住址" align="center">
                                            <template #default="scope">
                                                <span v-if="scope.row.familyAddress">{{scope.row.familyAddress}}</span>
                                                <span v-else>-</span>
                                            </template>
                                        </el-table-column>
                                        <el-table-column min-width="160" :show-overflow-tooltip="true" prop="phone" label="手机号" align="center">
                                            <template #default="scope">
                                                <span v-if="scope.row.phone">{{scope.row.phone}}</span>
                                                <span v-else>-</span>
                                            </template>
                                        </el-table-column>
                                        <el-table-column min-width="160" :show-overflow-tooltip="true" prop="emergencyPhone" label="紧急联系人" align="center">
                                            <template #default="scope">
                                                <span v-if="scope.row.emergencyPhone">{{scope.row.emergencyPhone}}</span>
                                                <span v-else>-</span>
                                            </template>
                                        </el-table-column>
                                        <el-table-column min-width="160" :show-overflow-tooltip="true" prop="physicalCounts" label="体检数量" align="center">
                                            <template #default="scope">
                                                <span v-if="scope.row.physicalCounts">{{scope.row.physicalCounts}}</span>
                                                <span v-else>-</span>
                                            </template>
                                        </el-table-column>
                                        <el-table-column min-width="160" :formatter="formatDate" :show-overflow-tooltip="true" prop="inductionDate" label="入职日期" align="center" />
                                        <el-table-column min-width="160" :formatter="formatDate" :show-overflow-tooltip="true" prop="leaveDate" label="离职日期" align="center" />
                                        <el-table-column min-width="160" :show-overflow-tooltip="true" label="启用状态" align="center">
                                            <template #default="scope">
                                                <span v-if="scope.row.isEnable">已启用</span>
                                                <span v-else>未启用</span>
                                            </template>
                                        </el-table-column>
                                        <el-table-column min-width="160" :show-overflow-tooltip="true" label="备注" align="center">
                                            <template #default="scope">
                                                <span v-if="scope.row.remark">{{scope.row.remark}}</span>
                                                <span v-else>-</span>
                                            </template>
                                        </el-table-column>
                                        
                                        <el-table-column prop="createdTime" min-width="160" :show-overflow-tooltip="true" label="创建时间"  align="center" />
                                        <el-table-column prop="createdUserName" min-width="160" :show-overflow-tooltip="true" label="创建者"  align="center" />
                                        <el-table-column prop="updatedTime" min-width="160" :formatter="otherData" :show-overflow-tooltip="true" label="更新时间"  align="center" />
                                        <el-table-column prop="updatedUserName" min-width="160" :formatter="otherData" :show-overflow-tooltip="true" label="更新者"  align="center" />
                                        
                                        <el-table-column min-width="180" label="操作" align="center" fixed="right">
                                            <template #default="scope">
                                                <div class="operate-s">
                                                    <el-button @click="nodeClick(scope.row)" class="icon-e" icon="ele-Edit" size="small" text type="primary">编辑</el-button>
                                                    <el-button @click="deleteHandle(scope.row.id , getData)" class="icon-e" icon="ele-Delete" size="small" text type="danger"> 删除 </el-button>
                                                </div>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </div>
                            </div>
                            <div style="height: 30px;margin-top: 20px;" class="hr-flex-start">
								<el-pagination
									v-model:currentPage="pageNo"
									v-model:page-size="pageSize"
									:total="totalRows"
									:page-sizes="[10, 20, 50, 100]"
									small
									background
									@size-change="handleSizeChange"
									@current-change="handleCurrentChange"
									layout="total, sizes, prev, pager, next, jumper"
									class="w-h-100"
								/>
							</div>
                        </div>
                    </el-card>
                </div>
            </div>
        </div>
        <add-edit-dep-manage
            :repairInfo="repairInfo"
            :isUseDialog="isUseDialog"
            @updateData="getData"
            @cancelUseClick="cancelUseClick"
            @controlUseClick="controlUseClick"
        />
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, Ref , reactive , toRaw } from 'vue';
import getTableData from '/@/utils/getTableData';
import { sysEmpQueryPageList , sysEmpDeleteEmp , UploadBatchImportData } from '/@/api/centerControl/oms';
import AddEditDepManage from '../component/oms/add-edit-dep-manage.vue';
import { ElMessageBox , ElMessage } from 'element-plus';
// import useCurrentInstance from '/@/utils/hook/useCurrentInstance';


export default defineComponent( {
    name: 'dep-manage',
    components: {
        AddEditDepManage,
    },
    setup(props){
        // const { proxy } = useCurrentInstance();
        // const $t = proxy.$t;

        const isUseDialog = ref() // 新增/编辑弹出框隐藏/显示
        const repairInfo = ref() // 传递子组件数据
        const searchVal = ref('1')
        const transferVal = ref() // 需要查询的值
        const projectNam = ref() // 人员名称数据
        const responsiblePle = ref() // 人员编号数据
        const pathData = ref(import.meta.env.VITE_API_URL + '/') // 获取地址
        let searchName = '1'
        let searchObj:any = reactive({})
        const aModel:Ref = ref(null)

        /*** 截取日期格式方法 */
        const otherData = (row:any, column:any) => {
          // 获取单元格数据
          let data = row[column.property]
          if(data == null) {
            return '-'
          }else{
            return data
          }
        }

        /*** 截取日期格式方法 */
        const formatDate = (row:any, column:any) => {
          // 获取单元格数据
          let data = row[column.property]
          if(data == null) {
              return '-'
          }
          if(data === '1900-01-01 00:00:00'){
            return '-'
          }
          let dt = new Date(data)
          let month = (dt.getMonth() + 1) < 10 ? '0' + (dt.getMonth() + 1) : (dt.getMonth() + 1)
          let date = dt.getDate() < 10 ? '0' + dt.getDate() : dt.getDate()
          return dt.getFullYear() + '-' + month + '-' + date
        }

        /*** resetFun */
        const resetFun = () => {
            let newObj = Object.keys(searchObj)
            if(newObj.length !== 0){
                newObj.map((i:any) => {
                    searchObj[i] = ''
                })
            }
        }

        /*** 搜索类型选择事件 searchChange */
        const searchChange = (val:any) => {
            searchName = val
            transferVal.value = ''
        }

        /*** acquireChange 搜索下拉框选择的数据 ---- 传给接口数据 */
        const acquireChange = (val:any) => {
            console.log(val)
        }

        /*** searchClick 查询按钮 */
        const searchClick = () => {
            resetFun()
            if(searchName === '1'){ searchObj.empName = transferVal.value }
            if(searchName === '2'){ searchObj.orgName = transferVal.value }
            if(searchName === '3'){ searchObj.type = transferVal.value }
        }

        /*** resetClick 重置按钮 */
        const resetClick = () => {
            searchVal.value = '1'
            transferVal.value = ''
            resetFun()
        }

        /*** nodeClick 新增/编辑点击事件 */
        const nodeClick = (val:string | object) => {
            val !== '' ? repairInfo.value = JSON.stringify(toRaw(val)) : repairInfo.value = ''
            isUseDialog.value = true
        }
        /*** deleteHandle 删除数据事件 */
        const deleteHandle = async (val: String | Number , updateFun: Function) => {
            ElMessageBox.confirm('请确定是否删除此条数据','警告',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            )
            .then(async() => {
                let param = {id : val}
                try {
                    let res:any = await sysEmpDeleteEmp(param)
                    if(res.success){
                        updateFun()
                    }
                } catch (err) { return }
            })
            .catch(() => {
                ElMessage({
                    type: 'info',
                    message: '已取消',
                })
            })
        }

        /*** cancelUseClick 取消事件 */
        const cancelUseClick = () => {
            isUseDialog.value = false
        }

        /*** controlUseClick 提交事件 */
        const controlUseClick = () => {
            isUseDialog.value = false
        }

        /*** downClick 下载模板 */
        const downClick = () => {
            // window.location.href = 'www.baidu.com' // 覆盖当前页
            window.open(toRaw(pathData.value) + 'Upload/SMS/Batch/Emp.xlsx','_blank') // 打开新页面
        }

        /*** ExcelChange 导入Excel */
        const ExcelChange = (item:any , updateFun: Function) => {
            let reader = new FileReader()
            reader.readAsDataURL(item.raw)
            reader.onload = (e:any) => {
                let base64String = e.target.result;
                let param:any = new Object()
                param.ModelType = 'Emp'
                param.FileContent = base64String
                uploadFun(param , updateFun)
            }
        }
        /*** uploadFun 批量导入数据接口 */
        const uploadFun = async ( p: Object , updateFun: Function ) => {
            aModel.value.clearFiles()
            let res:any = await UploadBatchImportData(p)
            if(res.success) updateFun() 
        }

        /*** onSuccess 文件上传成功时的钩子函数 */
        const onSuccess = (item:any) => {
            console.log(item,'item')
        }

        return {
            ...getTableData(sysEmpQueryPageList,{ type: 1 },searchObj),
            isUseDialog,
            cancelUseClick,
            controlUseClick,
            nodeClick,
            repairInfo,
            deleteHandle,
            resetClick,
            searchClick,
            downClick, // 下载模板
            ExcelChange, // 导入Excel
            onSuccess,
            aModel,

            searchOptions: [{
                value: '1',
                    label: '人员名称'
                }, {
                    value: '2',
                    label: '部门名称'
                }
            ], // 搜索方式
            searchVal,
            searchChange,
            transferVal,
            acquireChange,
            projectNam, // 人员名称数据
            responsiblePle, // 人员编号数据
            recordPle: [
                {label: '部门', value: 1},
                {label: '班组', value: 2},
            ], // 部门/班组
            pathData,
            formatDate,
            otherData,
        }
    },
} )
</script>
<style lang="scss"> @import '../style/public.scss'; </style>
<style scoped lang="scss">
    #dep-manage {
        .box-f{
            :deep(.el-form-item__label){
                padding: 0;
            }
        }
        :deep(.el-card__body) {
            height: 100%;
        }
        :deep(.el-card){
            border: none !important;
        }
        .upload-demo{
            margin-left: 12px;
            margin-top: 2px;
        }
        ul {

            list-style: none;

            li {
                cursor: pointer;

                &:hover {
                    color: red;
                }
            }
        }
        .icon-e{
            :deep(.el-icon){
                margin-right: 0px!important;
            }
        }
        .path_look{
            display: block;
            width: 100%;
            span{
                display: block;
                width: 100%;
                text-align: center;
            }
        }
    }
</style>